<template>
  <button @click="flag = !flag">切换</button>
  <transition
    enter-from-class="customEnter-from"
    enter-active-class="customEnter-active"
    enter-to-class="customEnter-to"
    leave-from-class="customLeave-from"
    leave-active-class="customLeave-active"
    leave-to-class="customLeave-to"
  >
    <div class="spare" v-if="flag"></div>
  </transition>
  <div class="sk-spare"></div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const flag = ref<boolean>(true);
</script>

<style lang="scss" scoped>
.spare {
  position: absolute;
  width: 200px;
  height: 200px;
  background-color: pink;
}

.sk-spare {
  width: 200px;
  height: 200px;
  background-color: transparent;
}

// 开始动画
.customEnter-from {
  width: 0;
  height: 0;
  background-color: rgb(183, 0, 255);
}
// 动画过程中
.customEnter-active {
  transition: all 0.5s linear;
}
// 动画完成
.customEnter-to {
  width: 200px;
  height: 200px;
  background-color: pink;
  transform: rotate(360deg);
}

//离开过度
.customLeave-from {
  width: 200px;
  height: 200px;
  background-color: pink;
}
//离开中过度
.customLeave-active {
  transition: all 3s linear;
}
//离开完成
.customLeave-to {
  width: 0px;
  height: 0px;
  transform: rotate(360deg);
}
</style>
